<template>
  <div class="index-main">
    <ul>
      <li class="lists" v-for="v in lists" :key="v.product_id">
        <router-link :to="'/detail/' + v.product_id">
          <img
            v-lazy="v.product_img_url"
            src="@/assets/img/loading.gif"
            width="150"
            height="150"
          />
        </router-link>
        <label>
          <b class="discount">折扣价：{{ v.product_uprice }}</b>
          <span class="price-text">原价：{{ v.product_price }}</span>
        </label>
      </li>
    </ul>
  </div>
</template>

<script>
import { getLists } from "@/api/request.js";

export default {
  name: "Lists",
  data() {
    return {
      lists: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getLists(1, 10).then((res) => {
        console.log(res);
        this.lists = res.data.data;
      });
    },
  },
};
</script>

<style>
</style>